<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">

            <view class="moneyBg">
                <view class="text">选择售后类型</view>
            </view>

            <view class="goodsDetail">
                <view style="width: 100%;">
                    <view class="wraper_top" v-for="(item, index) in goodsList" :key="index">
                        <view class="goodsPic">
                            <!-- <img :src="item.imgUrl" alt="" style="width: 93px;height: 93px;"> -->
                            <img class="img" :src="item.imgurl" mode="widthFix" />
                        </view>
                        <view class="goodsText">
                            <view class="goodsTop">
                                <view class="goods_T">{{ item.title }}</view>
                                <view class="goods_price">￥{{ item.price }}</view>
                            </view>
                            <view class="goodsMiddle">
                                <view class="goods_specs">{{ item.specs }}</view>
                                <view class="goods_num">X {{ item.num }}</view>
                            </view>
                            <view class="goodsBottom">
                                退款 ￥{{ item.money }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="wraper_bottom">
                    <view class="wraper_bottom_refund bb" @click="toRefund">
                        <view class="wraper_bottom_left">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/refund.png"
                                alt="" style="width: 16px;height: 16px;" />
                            <view class="wraper_bottom_left_text">
                                <view class="text_title">仅退款（无需退货）</view>
                                <view class="refundReason">未收到货/已拒收，或与商家协商一致不用退货只退款</view>
                            </view>
                        </view>
                        <view class="wraper_bottom_right">
                            <van-icon name="arrow" />
                        </view>
                    </view>
                    <view class="wraper_bottom_returnGoods t21" @click="toReturnGoods">
                        <view class="wraper_bottom_left">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/returnGoods.png"
                                alt="" style="width: 16px;height: 16px;" />
                            <view class="wraper_bottom_left_text">
                                <view class="text_title">退货退款</view>
                                <view class="refundReason">已收到货，需退还收到的货物</view>
                            </view>
                        </view>
                        <view class="wraper_bottom_right">
                            <van-icon name="arrow" />
                        </view>
                    </view>
                    <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/returnGoods.png"
                        alt=""
                        style="width: 16px;height: 16px;" /> -->
                    <!-- <img
                        src="
https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/refund.png"
                        alt=""
                        style="width: 16px;height: 16px;" /> -->
                </view>
            </view>

        </scroll-view>
        <van-toast id="van-toast" />
    </view>
</template>

<script>

export default {
    data () {
        return {
            navBarTitle: '售后服务',
            scrolling: false,
            refundMoney: '52',
            date: '2024-10-12 18:20',
            refundAmount: '52',
            refundScore: '4540', // 退回积分
            refundCoupon: 1, // 退回优惠券数量
            refundReason: '其他',
            applyDate: 'apply', // 申请时间
            refundCode: '3466777777888',
            // refundGoods: {
            //     orderNum: '343434343313131',
            //     orderStatus: '待收货',
            //     goodsId: 11,
            //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
            //     title: '黄芪杞姜枣糕红枣',
            //     price: '96',
            //     num: '1',
            //     jifen: 190,
            //     money: '156',
            //     specs: '口味一：五斤装',
            //     logistics: ''
            // },
            goodsList:[ ],
            params: undefined // 接受从路由传过来的参数
        }
    },
    onLoad (data) {
        if (data !== null) {
            // this.params=JSON.parse(decodeURIComponent(data.params))
            // console.log(this.params.item.isDefault)
            // if(this.params.item.isDefault && this.params.item.isDefault===true){
            //     this.checked=true
            // }else{
            //     this.checked=false
            // }
        }
    },
    onReady () {

    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },

        // 退款
        toRefund () {
            const params = {}
            params.title = '退款'
            uni.navigateTo({
                url: '/pages/afterSales/refundDetails?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
        },

        // 退货
        toReturnGoods () {
            const params = {}
            params.title = '退货退款'
            uni.navigateTo({
                url: '/pages/afterSales/refundDetails?params=' +
                encodeURIComponent(JSON.stringify(params))
            })}
    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}
.text{
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}
.money{
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left:19px;
}

.date{
    margin-top: 36px;
    padding: 0px 24px;
}

.refundDetail{
    padding: 42px 24px 24px 24px ;
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundText{
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundR{
    color: #888888;
}
/* dingdan编号 */
.refundCode{
    display: flex;
    align-items: center;
}
/* 复制两个字体 */
.copy {
    font-size: 12px;
    text-align: right;
    color: #111111;
    line-height: 12px;
  }
.goodsDetail {
    margin-top: 25px;
    padding: 0px 24px;
    /* display: flex;
    justify-content: space-between; */
    width: calc(100% - 48px)

}
.wraper_top {
    display: flex;
    width: 100%;
    margin-bottom: 11px;
}
.wraper_top :last-child{
    margin-bottom: 0px;
}


.goodsPic {
    width: 33%;

}
.goodsPic img {
    width: 100%;
    height: auto;
}
.goods_tips {
    margin-top: 6px;
    font-size: 11px;
    text-align: left;
    color: #888888;
    line-height: 11px;
}

.goodsText {
    position: relative;
    width: 67%;
    margin-left: 14px;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 6px;
    text-align: left;
}

.goodsTop {
    position: absolute;
    top: 5%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods_T {
    max-width: 80%;
    font-size: 14px;
    text-align: left;
    color: #111111;
    line-height: 14px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

/* // 商品价格 */
.goods_price {
    font-size: 14px;
    color: #737373;
    line-height: 14px;
}

.goodsMiddle {
    position: absolute;
    top: 30%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.goods_specs {
    max-width: 80%;
    font-size: 11px;
    text-align: left;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.goods_num {
    font-size: 11px;
    line-height: 11px;
    color: #666666;
}

.goodsBottom{
    position: absolute;
    bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #111111;
}

.wraper_bottom{
    margin-top: 30px;
    /* background: palegoldenrod; */
}

.wraper_bottom_refund,   .wraper_bottom_returnGoods{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bb{
    border-bottom: 1px solid #f9f9f9;

}
.wraper_bottom_left{
    display: flex;
    padding-bottom: 20px;
    width: 82%;
}
.wraper_bottom_left_text{
    padding-left: 12px;
    width: 90%;
}
.text_title{
    font-size: 13px;
    color: #111111;
    line-height: 16px;
}
.refundReason{
    margin-top: 16px;
    font-size: 13px;
    color: #666666;
    /* line-height: 13px; */
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
/* ::v-deep .van-switch{
    height: 18px !important;
    width: 36px !important;
    line-height: 18px !important;
    background-color: #C6C6C6 !important;
}
::v-deep .van-switch__node{
    height: 16px !important;
    line-height: 16px !important;
    width: 16px !important;
} */

 .t16{
    margin-top: 16px;
 }
 .t21{
    margin-top: 21px;
 }
</style>
